<template>
	<div v-show="details">
		<d2-container>
			<div slot="header">
				<el-link type="primary" @click="details = false">
					<i class="el-icon-back"></i>
					返回
				</el-link>
			</div>
			<div>
				<template>
					<el-table :data="tableData" border style="width: 100%">
						<el-table-column prop="created_at" label="时间" ></el-table-column>
						<el-table-column prop="userid" label="用户id" ></el-table-column>
						<el-table-column prop="user_name" label="用户名称" ></el-table-column>
						<el-table-column label="使用状态">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.state==1">已使用</el-tag>
								<el-tag type="danger" v-if="scope.row.state==2">未使用</el-tag>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</div>
			<!-- 分页 -->
			<template slot="footer">
				<el-pagination
					@current-change="handleCurrentChange"
					:current-page="page.current"
					layout="total, prev, pager, next, jumper"
					:total="page.total"
					:page-size="page.size"
				></el-pagination>
			</template>
		</d2-container>
	</div>
</template>

<script>
import { getPreferlog } from '@/api/api';
export default {
	props: {
		value: Boolean,
		id: Number
	},
	data() {
		return {
			details: false,
			tableData:[],
			page: {
				//分页
				total: 20,
				current: 1,
				size: 10
			},
		};
	},
	watch: {
		value(val) {
			if (val) {
				this.details = val;
			}
		},
		details(val) {
			if (val) {
				this.getPreDetailsData();
			} else {
				this.$emit('input', val);
			}
		}
	},
	methods: {
		getPreDetailsData() {
			let data={
				page:this.page.current
			}
			getPreferlog(this.id,data).then(res => {
				if (res.state == 0) {
					this.tableData=res.data.data;
					this.page.size=res.data.per_page;
					this.page.total=res.data.total;
				}
			});
		},
		//分页
		handleCurrentChange(val) {
			this.page.current = val;
			this.getPreDetailsData();
		},
	}
};
</script>

<style></style>
